<template>
    <!-- <template>只能向外暴露一个跟标签，需要最外包裹一个div -->
    <div class="header">
    <div class="header-left">
    <div class="iconfont back-icon">&#xe600;</div>
    </div>
    <div class="header-input">
      <span class="iconfont">&#xe67d;</span>
      输入城市/景点/游玩主题/</div>
    <div class="header-right">{{ this.city }}
      <span class="iconfont arrow-icon">&#xe665;</span>
    </div>
    </div>

  </template>
<script >
export default {
  name: 'HomeHeader',
  props: {
    city: String
  }
}
</script>
<!-- 1 rem = html font-size = 50px  86/100=.86rem -->
  <style lang="stylus" scoped>
  // @import '../../../assets/styles/varibles.styl'传统引入
  // @import '~@/assets/styles/varibles.styl'
  // 样式里面引用样式不能直接import，前面需要加@符,后一个@代表src目录，css中用@需要带~  ~@使用
  @import '~styles/varibles.styl'
      // 'styles': resolve('src/assets/styles'),修改webpack文件必须重启服务器，否则报错
    // ~styles styles在build目录中的webpack.beaseconf.js中添加了别名
  .header
    display: flex
    line-height:  .86rem
    background: $bgColor
    color: #fff
    .header-left
           width : .64rem
           float :left
           .back-icon
            font-size: .4rem
            text-align: center
    .header-input
          flex: 1
          line-height: .64rem
          height: .64rem
          margin-top :.12rem
          margin-left :.2rem
          color: #ccc
          background:#fff
          border-radius: .1rem
          padding-left: .2rem
    .header-right
           width : 1.24rem
           float :right
           text-align: center
           .arrow-icon
            font-size: .24rem
  </style>
